<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>登录</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/login.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/swiper.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/swiper.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/animate.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/iconfont/iconfont.css">
    <script src="${pageContext.request.contextPath}/js/verifyCode.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/verifyCode.css"/>
    <script src="${pageContext.request.contextPath}/js/jquery.validate.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/additional-methods.min.js"></script>
    <script src="${pageContext.request.contextPath}/layer/layer.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/nprogress.css">
    <script src="${pageContext.request.contextPath}/js/nprogress.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.cookie.js"></script>
    <style>
        .error {
            font-size: 12px;
            color: #ef4238;
            margin-top: 8px;
        }
    </style>
    <script>
        $(function () {
            $('#checkoutInput').val(show_num.join(""));
            $("#login-verify-code-canvas").on('click',function(){
                $('#checkoutInput').val(show_num.join(""));
                console.log(show_num.join(""))
            });
            jQuery.validator.addMethod("isMobile", function(value, element,param) {
                var pattern= /(^1[3,4,5,7,8]{1}[0-9]{9}$)/;
                if(pattern.test(value)){
                    return true;
                }else{
                    return false;
                }
            }, "请输入正确的手机号");
            //校验 用户名密码登录
            $('#loginForm1Submit').click(function () {
                //校验
                let flag = $('#login-form1').valid();
                //为true 提交表单
                if (flag) {
                    //登录代码
                    NProgress.start();
                    //登录发 ajax请求
                    $.ajax({
                        url:'${pageContext.request.contextPath}/backend/user/loginByUsername',
                        dataType: "json",
                        data:$('#login-form1').serialize(),
                        success:function (data) {
                            NProgress.done();
                            console.log(data);
                            layer.msg(data.message,function () {
                                //登录成功 跳转主页
                                if(parseInt(data.status)===1){
                                    window.location.href = '${pageContext.request.contextPath}/backend/user/goMain'
                                }
                            });
                        }
                    })
                }
            });
            $('#login-form1').validate({
                rules: {
                    username: {
                        required: true,
                        isMobile: true,
                    },
                    password: {
                        required: true
                    },
                    checkCode: {
                        required: true,
                        maxlength: 4,
                        equalTo: "#checkoutInput"
                    }
                },
                messages: {
                    username: {
                        required: "手机号不能为空",
                        isMobile:"请输入正确的手机号",
                    },
                    password: {
                        required: "密码不能为空"
                    },
                    checkCode: {
                        required: "验证码不能为空",
                        maxlength: "验证码错误",
                        equalTo: "验证码错误"
                    }
                },
                errorPlacement: function (error, element) {
                    error.appendTo(element.parent().parent());
                }
            });
        });
    </script>

</head>
<body style="background:url(http://127.0.0.1:8088/backendloginbg.jpg);background-size: cover" >

<div class="login-panel" id="login-panel">
    <div class="login-panel-left">
        <div class="left-item item-1">
            <img
                    src="${pageContext.request.contextPath}/images/IMG_20191223_163010.png"
            />
        </div>
        <div class="left-item item-2">
            <i class="iconfont icon-menu"></i>
            <div class="left-item-word">
                <h3>海量</h3>
                <p>海量电影任君挑选</p>
            </div>
        </div>
        <div class="left-item item-3">
            <i class="iconfont icon-jishizhanshi"></i>
            <div class="left-item-word">
                <h3>及时</h3>
                <p>最新电影及时上新</p>
            </div>
        </div>
    </div>
    <div class="login-panel-right">
        <div class="inner-box" id="inner-box">
            <form id="login-form1" style="margin-top: 20px">
                <div class="login-form1" style="margin-top: -20px">
            <span class="input-wrap">
              <div style="position: relative">
                <i class="iconfont icon-phone"></i>
                <input
                        type="tel"
                        class="input-phone"
                        placeholder="手机号"
                        name="username"
                />
              </div>
            </span>
                    <span class="input-wrap">
              <div style="position: relative">
                <i class="iconfont icon-password"></i>
                <input
                        type="password"
                        class="input-phone"
                        placeholder="密码"
                        name="password"
                />
              </div>
            </span>
                    <span class="input-wrap">
              <div style="position: relative">
                <i class="iconfont icon-yanzhengma"></i>
                <input type="hidden" id="checkoutInput" />
                <input
                        type="password"
                        class="input-phone"
                        placeholder="验证码"
                        style="width: 200px;padding-right: 120px"
                        name="checkCode"
                />
                <canvas
                        class="verify-code-canvas"
                        id="login-verify-code-canvas"
                        style="margin-left: 10px;margin-top: -15px;"
                ></canvas>
              </div>
            </span>
                    <span class="input-wrap-btn" id="loginForm1Submit">
              登录
            </span>
                    <%--<span class="register-tip">--%>
              <%--<p>没有账号 <span class="register-btn">立即注册</span></p>--%>
            <%--</span>--%>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

